<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name='viewport' content='width=device-width, initial-scale=1.0'>
		<title>视频网站</title>
		<link rel="stylesheet" type="text/css" href="css/video.css">
	</head>
	<body>
		<header>
			<h2>视频播放器</h2><!--标题-->
			<small>这是页头</small>
		</header><!--定义页头-->
		<article><!--定义正文-->
			<section>
				<figure>
					<video width="90%" controls loop><!--添加视频标签-->
						<source src="video/gakki.mp4" type="video/mp4"></source>
						当前浏览器不支持video直接播放，单击这里下载视频：
						<a href="video/gakki.mp4" download="gakki.mp4">下载视频</a>
					</video>
					<figcaption>LanPaoPao</figcaption><!--设置视频标题-->
				</figure>
			</section><!--定义段落-->
			<section>
				<form autocomplete="on"><!--创建form表单-->
					<div>
						<!--添加textarea标签-->
						<textarea name="input" rows="3" cols="20" placeholder="请输入评论..." title="评论框" accesskey="g" spellcheck="true" id="content"></textarea>
					</div>
					<!--添加按钮-->
					<button type="button" onclick="sendComment()">
						<mark>发表评论</mark>
					</button>
				</form>
			</section><!--定义段落-->
			<section>
				<ul id="commentList"></ul>
			</section><!--定义段落-->
			<script type="text/javascript">
				var list = document.getElementById('commentList');
				var text = document.getElementById('content');
				function sendComment() {
					//在DOM中创建一个<li>元素
					var li = document.createElement('li');
					//修改<textarea>的内容
						li.innerHTML= text.value;
						//将<li>元素追加到<ul>元素中
						list.appendChild(li);
						//清空<textarea>的内容
						text.value = "";
						//阻止表单提交后刷新
						return false;
						}
			</script>
					</textarea>
				}
			</script>
		</article>
		<footer>
			<h2>视频播放器</h2>
			<small>这是页脚</small>
		</footer><!--定义页脚-->
	</body>
</html>